<template>
	<view>
		<view class="box" @click="istool" :style="`background-color:${nowcolor};`">
			<view class="first" v-if="state==true" :style="`font-size:${fontsize}px;background-color:${nowcolor};color:${fontcolor};`">
				<rich-text :nodes="arr.content"></rich-text>
			</view>
		</view>
		<view class="kong" v-if="state==false" @click="itool">
			<image src="../../static/kong.png" mode=""></image>
		</view>
		<view class="tool" :class="tool==true?'act':''" :style="`background-color:${bottomBg};color:${bottomFont};`">
			<view class="tool-top">
				<view class="tool-top-left" @click="previousSection">
					<view class="top-title">上一章</view>
				</view>
				<view class="tool-pad">
					|
				</view>
				<view class="tool-top-right" @click="nextSection">
					<view class="top-title">下一章</view>
				</view>
			</view>
			<view class="tool-bottom">
				<view class="bootom-item" @click="isShow">
					<view class="item-img">
					<image src="../../static/mulu.png" mode=""></image>	
					</view>
					<view class="item-title">目录</view>
				</view>
				<view class="bootom-item" @click="inNight"  v-if="isnight==false">
					<view class="item-img">
						<image src="../../static/yejian.png" mode=""></image>
					</view>
					<view class="item-title">夜间</view>
				</view>
				<view class="bootom-item" @click="inDuring"  v-if="isnight">
					<view class="item-img">
						<image src="../../static/rejian.png" mode=""></image>
					</view>
					<view class="item-title">日间</view>
				</view>
				<view class="bootom-item" @click="isSet">
					<view class="item-img">
						<image src="../../static/shezhi.png" mode=""></image>
					</view>
					<view class="item-title">设置</view>
				</view>
				
			</view>
			
		</view>
		<view class="shade" v-if="show" @click="itool">
		
		</view>
		<view class="setting" v-if="isset" :style="`background-color:${bottomBg};color:${bottomFont};`">
			<view class="set-item">
				<view class="set-title">字号:</view>
				<view class="font-select">
					<view class="font-select-left" @click="reduce">
						<image src="../../static/bottom.png" mode=""></image>
					</view>
					<view class="font-size">{{fontsize}}</view>
					<view class="font-select-right" @click="add">
						<image src="../../static/top.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="set-item">
				<view class="set-title">背景:</view>
				<view class="bc-select">
					<view class="bg-color" :class="bgindex==ind?'action':''" v-for="(i,ind) in bgcolor" :key="ind" :style="`background-color:${i}`" @click="switchColor(i,ind)" ></view>
				</view>
			</view>
			<view class="set-item">
				<view class="set-title">颜色:</view>
				<view class="bc-select">
					<view class="bg-color" :class="fontindex==ind?'action':''" v-for="(i,ind) in fscolor" :key="ind" :style="`background-color:${i}`" @click="switchFontColor(i,ind)" ></view>
				</view>
			</view>
		</view>
		<view class="sectioncontent" :class="show?'show':''" :style="`background-color:${nowcolor};color:${fontcolor};`">
			<view class="aa" ref="boxheight">
				<view class="section-item" v-for="(i,ind) in sectionlist" :key="ind" :class="secindex==ind?'active':''"
					@click="switchSection(ind,i.uuid)">
					<!-- <rich-text :nodes="i.title"></rich-text> -->
					{{i.title}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		getSectionContent,
		getSectionList
	} from "../../api/index.js"
	export default {
		data() {
			return {
				arr: {},
				state: "",
				tool: true,
				show: false,
				isset:false,
				isnight:false,
				bookid: "",
				sectionlist: [],
				secindex: "",
				// scrollTop: 0,
				index: 0,
				fontindex:1,
				bgindex:0,
				fontsize:20,
				bgcolor:["#ffffff","#000000","#363636","#cccccc","#f7dcc1"],
				fscolor:["#ffffff","#000000","#f9834a","#aaff7f","#cccccc"],
				nowcolor:"#ffffff",
				fontcolor:"#000000",
				// bottomFont:"",
				// bottomBg:""
				
			}
		},
		onShow() {
			//初始化设置
			if(uni.getStorageSync("setup").length!=0){
				let data=uni.getStorageSync("setup")[0]
				console.log(data.fontcolor!=undefined);
				if(data.fontcolor!=undefined && data.nowcolor==undefined){
					this.fontcolor=data.fontcolor
					this.fontindex=data.fontindex
					uni.setNavigationBarColor({
					  frontColor:  "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
					  backgroundColor: '#555555' // 导航栏背景颜色
					});
				}else if(data.nowcolor!=undefined && data.fontcolor==undefined){
					this.nowcolor=data.nowcolor
					this.bgindex=data.bgindex
					if(data.nowcolor="#000000"){
						uni.setNavigationBarColor({
						  frontColor:  "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
						  backgroundColor: data.nowcolor // 导航栏背景颜色
						});
					}else{
						uni.setNavigationBarColor({
						  frontColor:  "#000000", // 导航栏标题颜色，只能是'black'或'white'
						  backgroundColor: data.nowcolor // 导航栏背景颜色
						});
					}
				}else if(data.fontcolor!=undefined && data.nowcolor!=undefined){
					this.fontcolor=data.fontcolor
					this.nowcolor=data.nowcolor
					this.fontindex=data.fontindex
					this.bgindex=data.bgindex
					console.log(data.nowcolor=="#000000");
					if(data.nowcolor=="#000000"){
						uni.setNavigationBarColor({
						  frontColor:  "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
						  backgroundColor: data.nowcolor // 导航栏背景颜色
						});
					}else {
						uni.setNavigationBarColor({
						  frontColor:  "#000000", // 导航栏标题颜色，只能是'black'或'white'
						  backgroundColor: this.nowcolor // 导航栏背景颜色
						});
					}
					
				}
			}
		},
		onLoad(options) {
			
			if (options.ind != null) {
				this.secindex = options.ind
			} else {
				this.secindex = 0
			}
			// console.log(options.ind);
			// console.log(options.bookid, options.uuid);
			this.bookid = options.bookid
			uni.showLoading({
				title: '正在加载...',
			});
			getSectionContent(options.bookid, options.uuid).then(res => {
				// console.log(res.data);
				if (res.data != null) {
					this.arr = res.data
					this.state = true
				} else {
					this.state = false
				}
				getSectionList(options.bookid).then(res => {
					// console.log(res.data.catalog);
					let newArr = []
					for (let i = 0; i < res.data.catalog.length; i++) {
						newArr.push({
							title: res.data.catalog[i].title.trim(),
							uuid: res.data.catalog[i].uuid
						});
					}
					// console.log(newArr);
					this.sectionlist = newArr
				})
				uni.hideLoading();
			})
		},
		methods: {
			//夜间模式
			inNight(){
				this.isset=false
				this.nowcolor="#000000",
				this.fontcolor="#ffffff",
				this.fontindex=0
				this.bgindex=1
				this.isnight=true
				uni.setNavigationBarColor({
				  frontColor:  "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
				  backgroundColor: '#000000' // 导航栏背景颜色
				});
				
				console.log(uni.getStorageSync("setup").length);
				if(uni.getStorageSync("setup").length!=0){
					// console.log(uni.getStorageSync("setup").data[0]);
					let arr=[]
					let data=uni.getStorageSync("setup")[0]
					// console.log(data);
					data.nowcolor=this.nowcolor
					data.fontcolor=this.fontcolor
					data.fontindex=0
					data.bgindex=1
					arr.push(data)
					uni.setStorageSync("setup",arr)
				}else{
					let arr=[]
					let obj={}
					obj.nowcolor=this.nowcolor
					obj.fontcolor=this.fontcolor
					obj.fontindex=0
					obj.bgindex=1
					arr.push(obj)
					uni.setStorageSync("setup",arr)
				}
			},
			//日间模式
			inDuring(){
				this.isset=false
				this.nowcolor="#ffffff",
				this.fontcolor="#000000",
				this.fontindex=1
				this.bgindex=0
				this.isnight=false
				uni.setNavigationBarColor({
				 frontColor:  "#000000", // 导航栏标题颜色，只能是'black'或'white'
				  backgroundColor: '#ffffff' // 导航栏背景颜色
				});
				if(uni.getStorageSync("setup").length!=0){
					// console.log(uni.getStorageSync("setup").data[0]);
					let arr=[]
					let data=uni.getStorageSync("setup")[0]
					// console.log(data);
					data.nowcolor=this.nowcolor
					data.fontcolor=this.fontcolor
					data.fontindex=1
					data.bgindex=0
					arr.push(data)
					uni.setStorageSync("setup",arr)
				}else{
					let arr=[]
					let obj={}
					obj.nowcolor=this.nowcolor
					obj.fontcolor=this.fontcolor
					obj.fontindex=1
					obj.bgindex=0
					arr.push(obj)
					uni.setStorageSync("setup",arr)
				}
			},
			//设置显示隐藏
			isSet(){
				this.isset=!this.isset
			},
			//切换背景颜色
			switchColor(col,ind){
				this.bgindex=ind
				console.log(col);
				this.nowcolor=col
				uni.setNavigationBarColor({
				 frontColor:  "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
				  backgroundColor: col // 导航栏背景颜色
				});
				if(uni.getStorageSync("setup").length!=0){
					// console.log(uni.getStorageSync("setup").data[0]);
					let arr=[]
					let data=uni.getStorageSync("setup")[0]
					// console.log(data);
					data.nowcolor=this.nowcolor
					data.fontcolor=this.fontcolor
					data.bgindex=ind
					arr.push(data)
					uni.setStorageSync("setup",arr)
				}else{
					let arr=[]
					let obj={}
					obj.nowcolor=this.nowcolor
					obj.fontcolor=this.fontcolor
					obj.bgindex=ind
					arr.push(obj)
					uni.setStorageSync("setup",arr)
				}
			},
			//切换字体颜色
			switchFontColor(col,ind){
				this.fontindex=ind
				this.fontcolor=col
				uni.setNavigationBarColor({
				  frontColor: "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
				  backgroundColor: this.nowcolor // 导航栏背景颜色
				});
				if(uni.getStorageSync("setup").length!=0){
					// console.log(uni.getStorageSync("setup").data[0]);
					let arr=[]
					let data=uni.getStorageSync("setup")[0]
					// console.log(data);
					data.nowcolor=this.nowcolor
					data.fontcolor=this.fontcolor
					data.fontindex=ind
					arr.push(data)
					uni.setStorageSync("setup",arr)
				}else{
					let arr=[]
					let obj={}
					obj.nowcolor=this.nowcolor
					obj.fontcolor=this.fontcolor
					obj.fontindex=ind
					arr.push(obj)
					uni.setStorageSync("setup",arr)
				}
			},
			//字体变大
			add(){
				this.fontsize++
			},
			//字体变小
			reduce(){
				if(this.fontsize<13){
					return
				}else{
					this.fontsize--
				}
			},
			//触底显示底部设置栏
			onReachBottom() {
				this.tool = true
			},
			//显示隐藏设置栏
			istool() {
				this.tool = !this.tool
				this.show = false
				this.isset=false
			},
			itool() {
				this.tool = !this.tool
				this.show = false
				this.isset=false
			},
			//显示目录
			isShow() {
				this.$refs.boxheight.scrollTop = this.index*40
				// console.log(this.$refs.boxheight);
				this.show = true
			},
			//上一章
			previousSection() {
				// console.log("上一章");
				// console.log(this.secindex);
				// console.log(this.sectionlist);
				this.secindex--
				this.show = false
				if (this.secindex < 0) {
					console.log("已经没有内容啦");
					this.secindex = 0
				} else {
					let key=uni.getStorageSync("key")
					let uuid = this.sectionlist[this.secindex].uuid
					console.log(this.bookid, uuid);
					uni.showLoading({
						title: '正在加载...',
					});
					getSectionContent(this.bookid, uuid).then(res => {
						console.log(res.data);
						uni.pageScrollTo({
						       scrollTop: 0,
							   duration:0
						      })
						if (res.data != null) {
							this.arr = res.data
							this.state = true
							uni.hideLoading();
						} else {
							this.state = false
							uni.hideLoading();
						}
					})
					if(key.length!=0){
						//查询记录
							let book_id=this.bookid
							let ind=this.secindex
							uniCloud.callFunction({
								name:"where_novel_records",
								data:{
									user_id:key,
									book_id
								},
								success:res=>{
									if(res.result.data.length>0){
										uniCloud.callFunction({
											name:"update_novel_records",
											data:{
												user_id:key,
												book_id,
												chapter_index:ind,
												book_uuid:uuid
											},
											success:res=>{
												console.log(res);
											}
										})
									}else{
										//添加记录
										uniCloud.callFunction({
											name:"add_novel_records",
											data:{
												user_id:key,
												book_id,
												book_uuid:uuid,
												chapter_index:ind
											},
											success:res=>{
												console.log(res);
											}
										})
									}
								}
							})
						
					}
				}
			},
			//下一章
			nextSection() {
				// console.log("下一章");
				// console.log(this.secindex);
				this.secindex++
				this.show = false
				if (this.secindex > this.sectionlist.length - 1) {
					this.secindex = this.sectionlist.length - 1
					console.log("已经没有内容啦");
				} else {
					let key=uni.getStorageSync("key")
					let uuid = this.sectionlist[this.secindex].uuid
					// console.log(this.bookid, uuid);
					uni.showLoading({
						title: '正在加载...',
					});
					getSectionContent(this.bookid, uuid).then(res => {
						// console.log(res.data);
						uni.pageScrollTo({
						       scrollTop: 0,
							   duration:0
						      })
						if (res.data != null) {
							this.arr = res.data
							this.state = true
							uni.hideLoading();
						} else {
							this.state = false
							uni.hideLoading();
						}
					})
					if(key.length!=0){
						//查询记录
							let book_id=this.bookid
							let ind=this.secindex
							uniCloud.callFunction({
								name:"where_novel_records",
								data:{
									user_id:key,
									book_id
								},
								success:res=>{
									if(res.result.data.length>0){
										uniCloud.callFunction({
											name:"update_novel_records",
											data:{
												user_id:key,
												book_id,
												chapter_index:ind,
												book_uuid:uuid
											},
											success:res=>{
												console.log(res);
											}
										})
									}else{
										//添加记录
										uniCloud.callFunction({
											name:"add_novel_records",
											data:{
												user_id:key,
												book_id,
												book_uuid:uuid,
												chapter_index:ind
											},
											success:res=>{
												console.log(res);
											}
										})
									}
								}
							})
						
					}
				}
			},
			//切换章节
			async switchSection(ind, uuid) {
				let key=uni.getStorageSync("key")
				this.index=ind
				uni.showLoading({
					title: '正在加载...',
				});
				uni.pageScrollTo({
				       scrollTop: 0,
					   duration:0
				      })
				this.secindex = ind
				console.log(this.bookid, ind, uuid);
				await getSectionContent(this.bookid, uuid).then(res => {
					console.log(res.data);
					if (res.data != null) {
						//获取章节内容成功
						
						this.arr = res.data
						this.state = true
						this.show = false
						uni.hideLoading();
						if(key.length!=0){
							//查询记录
								let book_id=this.bookid
								uniCloud.callFunction({
									name:"where_novel_records",
									data:{
										user_id:key,
										book_id
									},
									success:res=>{
										console.log(res,111);
										if(res.result.data.length>0){
											uniCloud.callFunction({
												name:"update_novel_records",
												data:{
													user_id:key,
													book_id,
													chapter_index:ind,
													book_uuid:uuid
												},
												success:res=>{
													console.log(res);
												}
											})
										}else{
											//添加记录
											uniCloud.callFunction({
												name:"add_novel_records",
												data:{
													user_id:key,
													book_id,
													book_uuid:uuid,
													chapter_index:ind
												},
												success:res=>{
													console.log(res);
												}
											})
										}
									}
								})
							
						}
						} else {
						//获取章节内容失败
						this.state = false
						this.show = false
						uni.hideLoading();
						if(key.length!=0){
							//查询记录
								let book_id=this.bookid
								uniCloud.callFunction({
									name:"where_novel_records",
									data:{
										user_id:key,
										book_id
									},
									success:res=>{
										if(res.result.data.length>0){
											uniCloud.callFunction({
												name:"update_novel_records",
												data:{
													user_id:key,
													book_id,
													chapter_index:ind,
													book_uuid:uuid
												},
												success:res=>{
													console.log(res);
												}
											})
										}else{
											//添加记录
											uniCloud.callFunction({
												name:"add_novel_records",
												data:{
													user_id:key,
													book_id,
													book_uuid:uuid,
													chapter_index:ind
												},
												success:res=>{
													console.log(res);
												}
											})
										}
									}
								})
							
						}
						
					}
				})
			}
		},
		computed:{
			bottomFont(){
				if(this.nowcolor=="#000000"){
					return "#c1c1c1"
				}
				if(this.nowcolor=="#ffffff"){
					return "#000000"
				}
			},
			bottomBg(){
				if(this.bottomFont=="#c1c1c1"){
					return "#818181"
				}
				if(this.bottomFont=="#000000"){
					return "#ffffff"
				}
			} 
			
		},
		watch:{
				
		}
	}
</script>

<style lang="scss">
	h1{
		font-size: 40rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.box{
		width: 100vw;
		height: 100vh;
		font-family: "黑体";
	}
	.kong {
		width: 100%;
		height: 611px;

		image {
			width: 100%;
			height: 100%;

		}
	}
	.first {
		// font-size: 18px;
		box-sizing: border-box;
		padding: 0 40rpx;
		image {
			width: 100%;
			height: 400px;

		}

		h1 {
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
			box-sizing: border-box;
			padding-bottom: 20rpx;
			// border-bottom: 1px solid #f1f1f1;
		}

		span {
			// font-size: 44rpx;
		}

		p {
			
			display: flex;
			letter-spacing: 1px;
			text-indent: 32px;
			line-height: 70rpx;
			margin: 15px 0;
		}
	}
	.shade{
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: black;
		opacity: .3;
		z-index: 111;
	}
	.tool {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #f9f9f9;
		transform: translateY(100px);
		transition: all .3s;
		display: flex;
		flex-direction: column;
		.tool-top{
			height: 40px;
			display: flex;
			// background-color: #f9f9f9;
			box-sizing: border-box;
			border-bottom: 1px solid #f0f0f0;
			.tool-top-left{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.tool-pad{
				width: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #d3d3d3;
			}
			.tool-top-right{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.tool-bottom{
			display: flex;
			height: 60px;
			.bootom-item{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.item-img{
					width: 40rpx;
					height: 40rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.setting{
		position: fixed;
		bottom: 60px;
		background-color: #f5f5f5;
		width: 100%;
		height: 240rpx;
		z-index: 200;
		box-sizing: border-box;
		padding: 20rpx 60rpx;
		.set-item{
			margin: 20rpx 0;
			display: flex;
			.set-title{
				font-size: 28rpx;
				// font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
			}
			.font-select{
				display: flex;
				.font-size{
					font-size: 36rpx;
					margin: 0 10rpx;
				}
				.font-select-left{
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #dfdfdf;
					box-sizing: border-box;
					padding: 0 20rpx;
					border-radius: 12rpx;
					image{
						width: 16rpx;
						height: 16rpx;
					}
					}
				.font-select-right{
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #dfdfdf;
					box-sizing: border-box;
					padding: 0 20rpx;
					border-radius: 12rpx;
					image{
						width: 16rpx;
						height: 16rpx;
					}
					
				}
			}
			.bc-select{
				display: flex;
				.bg-color{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: #4e4e4e;
					margin-right: 20rpx;
					border: 2px solid #e5e5e5;
					&.action{
						border-color: #f9834a;
					}
				}
			}
		}
	}
	.tool.act {
		transform: translateY(0px);
		box-shadow: 0px 2px 9px -1px #858585;
		;
	}

	.section-item {
		box-sizing: border-box;
		// border-bottom: 1px solid #efefef;
		// color: #4e4e4e;
		font-size: 16px;
		padding: 0 15px;
		height: 80rpx;
		line-height: 80rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;

		&.active {
			color: #f9834a;
			font-weight: bold;
		}
	}

	.sectioncontent {
		width: 320px;
		height: 100vh;

		position: fixed;
		top: 0rpx;
		left: 0rpx;
		transform: translateX(-320px);
		z-index: 999;
		overflow: scroll;
		transition: all .3s;
	}

	.sectioncontent.show {
		transform: translateX(0rpx);
		// box-shadow: 0px 0px 15px 2px #6e6e6e;
	}

	.aa {
		// background-color: #ffffff;
		width: 320px;
		height: 100vh;
		overflow: scroll;

	}
</style>